<!--
/**
* @author xuyh0817
* @email xuyh0817@foxmail.com
* @date 2022-03-27 22:55
* @version 2.0.0
* @doc todo
* @website todo
* @remark  如果要分发源码，需在本文件顶部保留此文件头信息！！
*/
-->
<template>
  <div class="main-header">
    <div class="x-render-header main-header-btns">
      <div>
        <template v-for="key of xDesignTable.operations">
          <!-- 根据 key 获取对应的 operationBtns 内容 -->
          <a-button
            v-if="operationBtns[key]"
            :key="key"
            :icon="operationBtns[key].icon"
            type="link"
            @click="operationBtns[key].click"
          >{{ operationBtns[key].label }}
          </a-button>
        </template>
      </div>
      <div v-if="xDesignTable.operations.includes('save')">
        <a-button
          icon="save"
          type="link"
          :disabled="xDesignTable.tableColumnOptions.length === 0"
          @click="$emit('save')"
        >保存数据
        </a-button>
      </div>
    </div>

    <!-- 预览弹窗 -->
    <template v-for="key of xDesignTable.operations">
      <component
        :is="operationBtns[key].component"
        v-if="operationBtns[key] && operationBtns[key].isComponent !== false"
        :key="key"
        :visible.sync="operationBtns[key].visible"
        @change="operationBtns[key].click"
      />
    </template>
  </div>
</template>

<script>
import XRenderPreviewDialog from '../XRenderPreviewDialog'
import XRenderDataDialog from '../XRenderDataDialog'
import XRenderCodeDialog from '../XRenderCodeDialog'
import XRenderBatchDialog from '../XRenderBatchDialog'

export default {
  name: 'XRenderMainHeader',
  inject: ['xDesignTable'],
  components: {
    XRenderPreviewDialog,
    XRenderDataDialog,
    XRenderCodeDialog,
    XRenderBatchDialog
  },
  data() {
    // 切换 visible
    const createToggleVisibleFn = key => {
      return () => {
        this.$set(
          this.operationBtns[key],
          'visible',
          !this.operationBtns[key].visible
        )
      }
    }
    return {
      // 左侧按钮列表
      operationBtns: {
        // 按钮的 key 和 xDesignTable 中 operationBtns 一一对应
        preview: {
          // 按钮的 icon
          icon: 'eye',
          // 按钮的内容
          label: '预览',
          // 增加 visible: false
          visible: false,
          // 组件
          component: XRenderPreviewDialog,
          // 增加 click
          click: createToggleVisibleFn('preview')
        },
        data: {
          icon: 'edit',
          label: '更改数据',
          // 增加 visible: false
          visible: false,
          // 组件
          component: XRenderDataDialog,
          // 增加 click
          click: createToggleVisibleFn('data')
        },
        code: {
          icon: 'code',
          label: '生成代码',
          // 增加 visible: false
          visible: false,
          // 组件
          component: XRenderCodeDialog,
          // 增加 click
          click: createToggleVisibleFn('code')
        },
        batch: {
          icon: 'plus',
          label: '批量添加',
          // 增加 visible: false
          visible: false,
          // 组件
          component: XRenderBatchDialog,
          // 增加 click
          click: createToggleVisibleFn('batch')
        },
        clear: {
          icon: 'el-icon-delete',
          label: '清空表单',
          // 不是组件
          isComponent: false,
          // 增加 click
          click: () => {
            // 将表单项置为空数组
            this.xDesignTable.tableColumnOptions = [
              {
                title: '序号',
                dataIndex: 'index'
              }
            ]
            this.xDesignTable.tableBtns = []
            // 将表格属性置为原默认值
            this.xDesignTable.initTableProps()
          }
        }
      }
    }
  }
}
</script>

<style lang="css" scoped>
/* 按钮列表 */
.main-header-btns {
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
}

/* 代码编辑区 */
.x-render-code {
  background: #2d2d2d;
  color: #ccc;
  font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
  font-size: 14px;
  line-height: 1.5;
  padding: 5px;
  height: 350px;
  margin-top: 20px;
  min-height: 350px;
}

/* 去除默认边框 */
.x-render-code .prism-editor__textarea:focus {
  outline: none;
}
</style>
